drow2DAxes(context);
var x1 = document.getElementById('x1');
var y1 = document.getElementById('y1');
var x2 = document.getElementById('x2');
var y2 = document.getElementById('y2');
var result = document.getElementById('result');
x1.onmouseover = hint;
y1.onmouseover = hint;
x2.onmouseover = hint;
y2.onmouseover = hint;
result.onmouseover = hint;
var show = document.getElementById('show');
var refurbish = document.getElementById('refurbish');
refurbish.onclick = function () {
    location.reload();
}
async function buOnclick() {
    if (x1.value == '' || x2.value == '' || y1.value == '' || y2.value == '') {
        alert('请先输入！');
        return;
    }
    var x11 = 0;
    var y11 = 0;
    var x22 = 0;
    var y22 = 0;
    try{
        x11 = eval(x1.value);
        y11 = eval(y1.value);
        x22 = eval(x2.value);
        y22 = eval(y2.value);
    }catch(error){
        alert("输入格式不正确，请重新输入！");
		return;
    }
    var bb = Math.max(Math.abs(x11), Math.abs(y11), Math.abs(x22), Math.abs(y22));
    checkAxes(mycanvas, context, bb, bb, 2);

    var re = x11 * x22 + y11 * y22;
    result.value = re;

    /*
    *(x2,y2)在(x1,y1)上的投影
    */
    var x3 = x11 * (y11 * y22 + x11 * x22) / (x11 * x11 + y11 * y11);
    var y3 = y11 * (y11 * y22 + x11 * x22) / (x11 * x11 + y11 * y11);

    let dashC = '#9900FF'; //虚线（辅助线）颜色
    context.save();
    context.lineWidth = 3;
    context.fillStyle = "black";
    context.font = "bold italic 20pt Times new roman";
    await drowVector3(context, x11, y11, 0,0, 'red');
    context.fillText('a', x11 * c1, -y11 * c1);
    await drowVector3(context, x22, y22, 0,0,'green');
    context.fillText('b', x22 * c1, -y22 * c1);
    drowDashedLine(context, 0, 0, x3, y3);
    drowDashedLine(context, x22, y22, x3, y3);
    await drowVector3(context, x3, y3,0,0,'blue');
    context.font = "italic 15pt Times new roman";
    context.fillText('b*cos(\u03B8)', x3 * c1, -y3 * c1);
    context.restore();
}

show.addEventListener('click', buOnclick);